<template>
  <div>
    <div class="flex gap-4 p-8">
      <div class="flex flex-col gap-4 w-[240px]">
        <Fieldset legend="CurrentTheme semantic" class="overflow-auto h-[800px]">
          <pre style="width: 200px" class="whitespace-pre-wrap break-words">{{ themeStore.CurrentTheme.semantic }}</pre>
        </Fieldset>
      </div>
      <div class="flex flex-col gap-4 w-[240px]">
        <Fieldset legend="TempTheme semantic " class="overflow-auto max-w-full h-[800px]">
          <pre style="width: 200px" class="whitespace-pre-wrap break-words">{{ themeStore.TempTheme.semantic }}</pre>
        </Fieldset>
      </div>
      <div class="flex flex-col gap-4 w-[240px]">
        <Fieldset legend="CurrentTheme primitive" class="overflow-auto h-[800px]">
          <pre style="width: 200px" class="whitespace-pre-wrap break-words">{{
            themeStore.CurrentTheme.primitive
          }}</pre>
        </Fieldset>
      </div>
      <div class="flex flex-col gap-4 w-[240px]">
        <Fieldset legend="TempTheme primitive " class="overflow-auto max-w-full h-[800px]">
          <pre style="width: 200px" class="whitespace-pre-wrap break-words">{{ themeStore.TempTheme.primitive }}</pre>
        </Fieldset>
      </div>
    </div>
    <AppDesigner />
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  import { useToast } from 'primevue/usetoast'
  import { useAppStore } from '@/stores/useAppStore'
  // import Configurator from "@/layouts/components/AppConfigurator.vue"
  // import AppDesigner from '@/components/appdesigner/AppDesigner.vue'
  import { useThemeStore } from '@/stores/useThemeStore'

  const appStore = useAppStore()
  const themeStore = useThemeStore()
  const toast = useToast()

  const initialValues = ref({
    username: '' as any,
  })

  interface FormError {
    type: string
    message: string
  }

  const toggleTheme = () => {
    appStore.designerVisible = !appStore.designerVisible
  }

  const changeTheme = () => {
    themeStore.CurrentTheme.primitive.borderRadius = {
      none: '10',
      xs: '120px',
      sm: '140px',
      md: '160px',
      lg: '180px',
      xl: '120px',
    }
  }

  const resetTheme = () => {
    console.log('resetTheme')
    themeStore.$reset()
  }

  const resolver = ({ values }: { values: any }) => {
    const errors: { username: FormError[] } = { username: [] }

    if (!values.username) {
      errors.username.push({ type: 'required', message: 'Username is required.' })
    }

    if (values.username?.length < 3) {
      errors.username.push({
        type: 'minimum',
        message: 'Username must be at least 3 characters long.',
      })
    }

    return {
      errors,
    }
  }

  const onFormSubmit = ({ valid }: { valid: boolean }) => {
    if (valid) {
      toast.add({
        severity: 'success',
        summary: 'Form is submitted.',
        life: 3000,
      })
    }
  }
</script>
